<template>
  <div>
    <div class="container">
      <div class="content">
        <div class="contact">
          <input type="text" placeholder="请选择" readonly @click="popupVisible = true" v-model="statusValue">
        </div>
      </div>
    </div>
    <mt-popup v-model="popupVisible" position="bottom">
      <mt-picker :slots="slots" @change="handleChange" value-key="text"></mt-picker>
    </mt-popup>
  </div>
</template>
<script>
  export default {
    name: "componentA",
    data() {
      return {
        popupVisible: false,
        statusValue: '',
        slots: [
          {
            flex: 1,
            values: [
              {
                text: '正常',
                value: 1,
              },
              {
                text: '不正常',
                value: 2
              }
            ]
          }
        ]
      }
    },
    methods: {
      handleChange(picker, values) {
      //  console.log(values);
        if(values.length > 0) {
          this.statusValue = values[0].text
        }
      }
    }
  }
</script>
<style scoped>
  .content .contact {
    margin: 1rem 1rem;
  }
  .content .contact input {
    height: 3.5rem;
    display: block;
    width: 100%;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
    margin-top: .5rem;
    padding: .5rem 1rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .mint-popup-bottom {
    width: 100%;
  }
</style>
